<template>
  <div class="system-iotDeviceGroup-add">
    <!-- 坐席实名审核详情 -->
    <el-dialog center v-model="isShowDialog" width="800px" :close-on-click-modal="false"
      :destroy-on-close="true">
      <template #header>
        <div >
          坐席实名审核详情</div>
      </template>
      <el-form ref="formRef" :model="formData" :rules="rules" label-width="150px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="所属企业：">{{ formData.companyName }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="姓名">{{ formData.realName }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="身份证号">{{ formData.cardId }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <div class="centerV mb30" @click="handleClick(formData.idCardFront)">
              <el-image style="width: 240px; height: 150px" :src="formData.idCardFront" fit="cover" lazy />
              <div class="mt5 fs20">身份证正面照 {{!formData.idCardFront?'未上传':'' }}</div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="centerV mb30" @click="handleClick(formData.idCardBack)">
              <el-image style="width: 240px; height: 150px" :src="formData.idCardBack" fit="cover" lazy />
              <div class="mt5 fs20">身份证反面照 {{!formData.idCardBack?'未上传':'' }}</div>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div>
          <el-button @click="onCancel" size="default">取 消</el-button>
          <el-button type="primary" @click="onSubmit()" size="default" :loading="loading">提交</el-button>
        </div>
      </template>
    </el-dialog>
    <el-image-viewer v-if="showPreview" :url-list="srcList" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" lazy
      :preview-src-list="srcList" show-progress :initial-index="initialIndex"   @close="showPreview = false"  hide-on-click-modal />
  </div>
</template>
<script lang="ts">
import { reactive, toRefs, defineComponent, ref, unref,  } from 'vue';
import {ElMessage, } from 'element-plus';
import { seatInfoApi,seatAuditApi } from '@/api/auditTask/seatAuthentication';
export default defineComponent({
  name: 'seatAuthenticationDetail', //坐席实名审核详情
  components: {},
  props: {
    configUserTypeData: {
      type: Array,
      default: () => []
    },
  },
  setup(props, { emit }) {
    const formRef = ref<HTMLElement | null>(null);
    const menuRef = ref();
    const state = reactive({
      loading: false,
      isShowDialog: false,
      showPreview: false,
      srcList: [],  //预览图片
      initialIndex: null,  //初始图片索引
      formData: {
        companyName: undefined,
        realName:undefined,
        cardId:undefined,
        idCardFront:undefined,
        idCardBack:undefined,
        id:undefined
      },
      // 表单校验
      rules: {
        // monthPrice: [{ required: true, message: '请输入月租价格', trigger: 'blur' }],
        // minutePrice: [{ required: true, message: '请输入分钟数价格', trigger: 'blur' }],
      },
    });
    // 打开弹窗
    const openDialog = (cardId,companyName,id) => {
      resetForm();
      seatInfoApi({ id:cardId }).then((res: any) => {
        if (res?.data) {
          state.formData = res.data
           state.formData.companyName=companyName
           state.formData.id=id
        }
        state.isShowDialog = true;
      })

    };
    // 关闭弹窗
    const closeDialog = () => {
      state.isShowDialog = false;
    };
    // 取消
    const onCancel = () => {
      closeDialog();
    };
    // 提交
    const onSubmit = () => {
      const formWrap = unref(formRef) as any;
      if (!formWrap) return;
      formWrap.validate((valid: boolean) => {
        if (valid) {
          state.loading = true;
          seatAuditApi({id:[state.formData.id]})
            .then(() => {
              ElMessage.success(`提交成功`);
              closeDialog(); // 关闭弹窗
              emit('getList');
            })
            .finally(() => {
              state.loading = false;
            });
        }
      });
    };

    // 打开预览
    const handleClick = (item, index = 0) => {
      state.srcList = []
      if (!item) return
      // 如果val是数组，检查是否至少有一个权限存在
      if (Array.isArray(item)) {
        state.srcList = item
      }
      // 如果val是字符串，检查单个权限
      if (typeof item === 'string') {
        state.srcList = [item]
      }

      state.initialIndex = index
      state.showPreview = true
    }
    const resetForm = () => {
      state.formData = {
       companyName: undefined,
        realName:undefined,
        cardId:undefined,
        idCardFront:undefined,
        idCardBack:undefined,
      };
    };
    return {
      menuRef,
      formRef,
      openDialog,
      handleClick,
      closeDialog,
      onCancel,
      onSubmit,
      resetForm,
      ...toRefs(state),
    };
  },
});
</script>
<style scoped></style>
